<template>
  <div id="app">
    <div class="const">
      <div @click="backtop" class="fh" v-show="isShow" style="font-weight: 600;">↑</div>
    </div>
    <div class="container" style="height: 60px">
      <van-sticky :container="container"> </van-sticky>
      <div class="head">
        <div class="navBox">
          <ul class="leftnav">
            <li style="margin-left: -20px">
              <img
                width="100px"
                height="50px"
                src="https://img0.baidu.com/it/u=3747594822,2760880229&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500"
                class="img"
                alt=""
              />
            </li>
            <li>
              <div>
                <router-link
                  style="color: var(--titlecolor)"
                  to="/home/article"
                >
                  {{ $t("acticle") }}
                </router-link>
              </div>
            </li>
            <li>
              <div>
                <router-link
                  style="color: var(--titlecolor)"
                  to="/home/archives"
                >
                  {{ $t("archives") }}
                </router-link>
              </div>
            </li>
            <li style="margin-right: 200px">
              <div>
                <router-link
                  style="color: var(--titlecolor)"
                  to="/home/knowledge"
                >
                  {{ $t("knowledgebooks") }}
                </router-link>
              </div>
            </li>
          </ul>
          <ul class="rightnav">
            <li>
              <el-dropdown placement="bottom-start">
                <svg
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="30px"
                  height="30px"
                >
                  <path
                    d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z"
                    fill="var(--titleHcolor)"
                  ></path>
                </svg>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <p @click="changeCE('zh-EN')">
                      {{ $t("en") }}
                    </p>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <p @click="changeCE('zh-CN')">
                      {{ $t("cn") }}
                    </p>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li @click="tabflag">
              <svg
                v-if="flag"
                t="1673331456432"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2209"
                width="30"
                height="30"
              >
                <path
                  d="M863.973001 448.017999c-14.591544 0-27.007156 4.303866-36.942846 9.711697a317.190088 317.190088 0 0 0-18.911409-66.733915c6.367801-10.767664 14.655542-21.471329 24.687229-27.279147 35.102903-20.271367 52.270367 6.783788 99.132902-20.287366 25.103216-14.495547 38.254805-61.726071 23.423268-87.437268-103.05278 59.51814-115.996375-6.927784-170.55467 24.575232a76.573607 76.573607 0 0 0-27.023156 26.655167 321.829943 321.829943 0 0 0-49.838442-47.822505c0.095997-12.575607 1.903941-26.127184 7.743758-36.238868 20.271367-35.118903 48.65448-20.287366 75.709634-67.133902 14.495547-25.103216 2.271929-72.573732-23.423268-87.421268-59.502141 103.05278-103.932752 52.014375-135.419768 106.57267a76.733602 76.733602 0 0 0-10.063686 36.830849 316.950095 316.950095 0 0 0-67.021905-16.703478c-6.223806-10.959658-11.487641-23.567264-11.487641-35.278898 0-40.542733 31.999-41.886691 31.999-95.997C575.982001 35.022906 541.647074 0.016 511.984 0.016c0 119.004281-63.998 97.004969-63.998 160.010999 0 14.591544 4.303866 26.991157 9.695697 36.926846-23.167276 3.967876-45.534577 10.23968-66.717915 18.911409-10.767664-6.351802-21.471329-14.639543-27.263148-24.671229-20.271367-35.118903 6.767789-52.270367-20.287366-99.132902C328.917721 66.925909 281.687197 53.77432 255.992 68.605856c59.502141 103.05278-6.927784 116.012375 24.575232 170.57067a76.829599 76.829599 0 0 0 26.655167 27.023155 321.829943 321.829943 0 0 0-47.822505 49.838443c-12.591607-0.095997-26.127184-1.903941-36.238868-7.743758-35.118903-20.287366-20.271367-48.65448-67.133902-75.709634-25.119215-14.495547-72.605731-2.271929-87.437267 23.423268 103.05278 59.502141 51.998375 103.932752 106.55667 135.435767a76.7976 76.7976 0 0 0 36.846848 10.063686 317.910065 317.910065 0 0 0-16.703478 67.021905c-10.975657 6.223806-23.583263 11.487641-35.294897 11.487641-40.542733 0-41.870692-31.999-95.997-31.999-29.007094 0-63.998 34.318928-63.998 63.982001 118.988282 0 97.004969 64.014 159.995 64.014 14.591544 0 27.007156-4.303866 36.942846-9.711697 3.967876 23.167276 10.23968 45.518578 18.895409 66.701916-6.351802 10.767664-14.639543 21.487329-24.687228 27.295147-35.118903 20.271367-52.270367-6.783788-99.132902 20.287366-25.119215 14.479548-38.270804 61.726071-23.423268 87.405268 103.05278-59.502141 115.996375 6.927784 170.570669-24.575232a76.669604 76.669604 0 0 0 27.023156-26.639167 320.997969 320.997969 0 0 0 49.838442 47.806506c-0.111997 12.591607-1.903941 26.127184-7.743758 36.254867-20.271367 35.118903-48.65448 20.271367-75.709634 67.133902-14.495547 25.103216-2.271929 72.589732 23.423268 87.421268 59.502141-103.03678 103.932752-51.998375 135.419768-106.540671a76.845599 76.845599 0 0 0 10.063686-36.862848c21.375332 7.871754 43.758633 13.535577 67.005906 16.703478 6.223806 10.975657 11.503641 23.583263 11.50364 35.310897 0 40.542733-31.999 41.870692-31.999 95.997 0 29.007094 34.318928 63.998 63.998 63.998 0-119.004281 63.998-97.004969 63.998001-159.995 0-14.607544-4.303866-27.007156-9.711697-36.958845a318.246055 318.246055 0 0 0 66.717915-18.89541c10.767664 6.351802 21.487329 14.639543 27.279148 24.687229 20.271367 35.118903-6.767789 52.270367 20.287366 99.132902 14.495547 25.119215 61.726071 38.270804 87.421268 23.439267-59.502141-103.05278 6.927784-116.012375-24.575232-170.570669a76.701603 76.701603 0 0 0-26.655167-27.023156 321.829943 321.829943 0 0 0 47.822505-49.838442c12.575607 0.095997 26.127184 1.903941 36.238868 7.743758 35.118903 20.287366 20.271367 48.65448 67.133902 75.709634 25.119215 14.479548 72.589732 2.271929 87.437267-23.423268-103.05278-59.502141-51.998375-103.932752-106.55667-135.419768a76.605606 76.605606 0 0 0-36.846848-10.063686 318.006062 318.006062 0 0 0 16.703478-67.005906c10.975657-6.239805 23.583263-11.503641 35.294897-11.50364 40.542733 0 41.870692 31.999 95.997 31.999 29.007094 0 63.998-34.334927 63.998-63.998-118.988282 0-96.988969-63.998-159.995-63.998001z"
                  fill="#FFCC66"
                  p-id="2210"
                ></path>
              </svg>
              <svg
                v-else
                t="1673331633291"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4152"
                width="30"
                height="30"
                background="#fff"
              >
                <path
                  d="M505.4 878.6c-196.7 0-358-150.9-374.9-343.1 1-18.6 16.1-33.4 34.9-33.4 10.8 0 20.5 4.8 26.9 12.4 0.2 0.3 0.5 0.1 0.5-0.7 41.6 44.2 100.5 71.9 166.1 71.9 127.1 0 230.1-103 230.1-230.1 0-66.1-28-125.1-72.6-166.8 0.1-0.1 0.5-0.1 0.3-0.3-7-6.5-11.4-15.7-11.4-26.1 0-19 14.9-34.1 33.7-35.3 192.1 17.1 342.9 178.3 342.9 375 0 208-168.5 376.5-376.5 376.5z"
                  fill="#733FF1"
                  p-id="4153"
                ></path>
              </svg>
            </li>
            <li @click="$router.push('/searchbox')">
              <span><van-icon class="search" name="search" /> </span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="main">
      <router-view />
    </div>

    <div class="footer">
      <div class="footerBox"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      container: null,
      flag: true,
      flag1: false,
      isShow: false,
    };
  },
  mounted() {
    // this.container = this.$refs.container;
    // const size = document.querySelector("html");
    // size.style.fontSize = (window.innerWidth / 1536) * 100 + "px";
    // window.onresize = () => {
    //   const size = document.querySelector("html");
    //   size.style.fontSize = (window.innerWidth / 1536) * 100 + "px";
    // };
    // window.onscroll = () => {
    //   const size = document.querySelector(".topsrc");
    //   size.style.display = "block";
    //   if (document.documentElement.scrollTop <= 10) {
    //     size.style.display = "none";
    //   }
    // };
    this.listenerFunction();
  },
  methods: {
    listenerFunction() {
      document.addEventListener("scroll", this.handleScroll, true);
    },
    beforeDestroy() {
      document.removeEventListener("scroll", this.listenerFunction);
    },
    handleScroll() {
      // handleScroll 和 methods 是同级
      if (window.pageYOffset > 300) {
        //window.pageYOffset:获取滚动距离
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  //返回顶部
  backtop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },

    changeCE(type) {
      this.$i18n.locale = type;
    },
    bnt() {
      this.flag1 = false;
    },
    tabflag() {
      this.flag = !this.flag;
      let style;
      if (this.flag) {
        style = {
          "--background": "#e7eaee",
          "--contentBackground": "#fff",
          "--titlecolor": "#000",
          "--titleHcolor": "#333",
        };
      } else {
        style = {
          "--background": "#34373a",
          "--contentBackground": "#363c48",
          "--titlecolor": "#fff",
          "--titleHcolor": "#ccc",
        };
      }
      for (let i in style) {
        document.documentElement.style.setProperty(i, style[i]);
      }
    },
    goSer() {},
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  background: var(--background);
}
// #app{
//   @media only screen and (max-width:1000px){
//     .main{
//       width: 200px;
//       background: red;
//     }
    
//   }
// }
:root {
  font-size: 0.16rem;
  margin: 0;
  padding: 0;
  --background: #e7eaee;
  --contentBackground: #fff;
  --titlecolor: #000;
  --titleHcolor: #6b6863;
  --titleTabColor: #7a7e89;
}
.fh {
  width: 30px;
  height: 30px;
  border: 1px solid;
  position: fixed;
  bottom: 50px;
  right: 60px;
  background: #000;
  color: #fff;
  border-radius:50%;
  border: none;
  text-align: center;
  line-height: 30px;
 font-weight: 500;
}
.head {
  width: 100%;
  background: var(--contentBackground);
  .navBox {
    height: 60px;
    width: 1000px;
    margin: 0 auto;
    background: var(--contentBackground);

    .leftnav li {
      background: var(--contentBackground);

      background: none;
      list-style: none;
      float: left;
      line-height: 60px;
      margin-left: 60px;
      a {
        text-decoration: none;
        background: none;
        color: #000;
      }
      .router-link-active {
        text-decoration: none;
        color: red;
      }
    }
    .rightnav {
      float: right;
      display: flex;
      margin-right: 20px;

      li {
        margin-top: 10px;
        margin-left: 20px;
      }
      .search {
        width: 30px;
        height: 30px;
        font-size: 26px;
      }
    }
  }
}

.main {
  width: 1000px;
  margin: 0 auto;
}
.footer {
  width: 100%;
  background: #292525;
  .footerBox {
    height: 80px;
    width: 1000px;
    margin: 0 auto;
    background: #292525;
    color: white;
  }
}
</style>
